<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <div class="header">
          <el-button size="small" @click="handelDelAll" type="danger">删除选中</el-button>
          <el-input placeholder="搜索留言" style="width:300px" v-model="message" clearable>
            <template slot="append">
              <el-button size="small" type="primary" @click="searchHandle">搜索</el-button>
            </template>
          </el-input>
        </div>
      </template>

    </vxe-toolbar>

    <vxe-table ref="xTable" border show-overflow :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}">
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column field="mess" title="留言">
      </vxe-column>
      <vxe-column field="createTime" title="创建时间" width="200">
      </vxe-column>
      <vxe-column title="删除" width="55">

        <template #default="{ row }">
          <vxe-button type="text" @click="removeRowEvent(row)" icon="vxe-icon-delete"></vxe-button>
        </template>
      </vxe-column>
      <!--自定义空数据模板-->
      <template #empty>
        <span style="color: red;">
          <p>没有更多数据了！</p>
        </span>
      </template>
    </vxe-table>
    <div class="block">
      <el-pagination layout="prev, pager, next" @current-change="handleChange" :page-size="6" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  data () {
    return {
      total: 0,
      page: '1',
      message: '',
      tableData: [
      ]
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 搜索
    searchHandle () {
      this.getList(this.page, this.message)
    },
    // 删除全选的
    async handelDelAll () {
      if (!this.$refs.xTable.getCheckboxRecords().length) return this.$message.error('不能一个都不选')
      await this.$axios.post('/message/delAll', {
        ids: this.$refs.xTable.getCheckboxRecords().map(item => item.id)
      })
      this.getList(this.page, this.message)
    },
    // 分页
    handleChange (page) {
      this.page = page
      this.getList(page, this.message)
    },
    // 删除单个
    async removeRowEvent (row) {
      this.$axios.delete(`/message/${row.id}`)
      this.getList(this.page, this.message)
    },
    // 渲染数据
    getList (page = 1, message = '') {
      this.$axios.get(`/message?page=${page}&limit=6&message=${message}`).then(res => {
        this.tableData = res.data.inof.data.map(item => ({ createTime: dayjs(item.createTime - 0).format('YYYY-MM-DD HH:mm'), mess: item.message, id: item._id }))
        this.total = res.data.inof.count
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.header {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.el-button.el-button--danger.el-button--small {
  padding: 0 7px;
  height: 30px;
}
.block {
  margin-top: 40px;
  text-align: right;
}
</style>
